
// 整体布局
.layout{
    max-width: 640px;
    background-color: #ddd;
    margin: 0 auto; 
    // 头部样式
    .mmb_header{
        background-color: #ff9000;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            display: block;
            width: 100%;
        }
        h3{
            width: 100%;
            padding-left: 10px;
            color: #fff;
            text-align: center;
            margin: 3px 0 0 0;
            a{
                text-decoration: none;
                color: #fff;
                font-weight: 100;
                width: 26px;
                height: 26px;
                float: left;
            }
        }
        div{
            padding-right: 10px;
            a{
                display: block;
                width: 34px;
            }
        }
    }
    // 筛选栏样式
    .selectTitle{
        background-color: #fff;
        height: 35px;
        display: flex;
        border: 1px solid #aaa;
        
        border-left: none;
        border-right: none;
        .selectTitle-left{
            flex: 1;
            display: flex;
            .btn-group{
                flex: 1;
                .btn{
                    width: 100%;
                    border: none;
                    text-align: center;
                    font-size: 14px;
                    > .glyphicon{
                        font-size: 10px;
                    }
                }
                .btn-default:hover{
                    background-color: none;
                }
                .dropdown-menu{
                    margin: 0;
                    width: 350%;
                    padding: 0;
                    li{
                        border-bottom: 1px solid #ccc;
                    }
                }
                .dropdown-menu > .active{
                    ::before{
                        content: "✔";
                        position: absolute;
                        left: 90%;
                        color: #ff9000;
                        font-size: 20px
                    }
                }
                .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{
                    color: #000;
                    background-color: #fff;

                }
                
                
            }
            .area{
                .dropdown-menu{
                    left: -100%;
                }
            }
            >.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default{
                background-color: #fff;
            }
            .btn-group.open .dropdown-toggle{
                box-shadow:none;
            }
        }
        .selectTitle-right{
            width: 44px;
            height: 35px;
            a{
                box-sizing: border-box;
                background-image: url(../../images/icon_bar.png);
                // background-repeat: no-repeat;
                background-size: 200px;
                background-position: -37px -206px;
                border-left: 1px solid #aaa;
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }  
    // 产品内容样式
    .productInfo{
        .row{
            max-width: 640px;
            display: flex;
            padding: 9px 9px 3px;
            flex-wrap: wrap;
            
           >.product{
               width: 49%;
               padding: 10px;
            //    height: 302px;
               background-color: #FFf;
               box-sizing: border-box;
            //    padding-right: 4px;
               margin-bottom: 8px;
               text-align: center;
               img{
                   width: 100%;
               }
               p{ 
                   margin: 7px auto;
                   height: 17px;  
                   display: block;
                   width: 80%;
                   font-size: 10px;
                   overflow: hidden;
                   text-align: center;
                   
               }
               .price{
                   padding: 0 10px;
                   display: flex;
                   justify-content: space-between;
                   span{
                       color: #f00;
                       line-height: 30px;
                   }
                   a{
                       background-color: orange;
                       text-decoration: none;   
                       text-align: center;
                        width: 60px;
                        line-height: 30px;
                        color: #fff;
                        border-radius: 4px;
                   }
               }
           } 
           >div:nth-of-type(2n){
               margin-left: 2%;
                // padding: 0;
                // padding-left: 4px;
                // background-color: #00f;
           }
        }
    }  
    // 底部样式
    #foot{
        .footer {
            background: #efefef;
            text-align: center;
            font-size: 12px;
            padding: 15px 0;
            color: #666;
        }
        .foot_top {
            background: #efefef;
            border-top: 1px solid #c4c4c4;
            border-bottom: 1px solid #c4c4c4;
            height: 34px;
            line-height: 34px;
            // margin-top: 25px;
            clear: both;
            a {
                position: relative;
                // text-decoration: n
                box-sizing: border-box;
                float: left;
                font-size: 14px;
                border-right: 1px solid #c4c4c4;
                text-align: center;
                width: 30%;
                img {
                    position: absolute;
                    vertical-align: middle;
                    width: 15px;
                    height: 15px;
                    margin-top: -5px;
                    margin-right: 2px;
                    top: 14px;
                    left: 55px;
                }
            }
        }
    }
}
